<template>
  <div style="overflow: hidden">
    <div class="go-b">
      <Goback :title="title"></Goback>
    </div>
    <div class="detailhead">
      <div class="desgin">
        <i v-if="detail[0]">{{ detail[0].wname }}</i>
        <span v-if="detail[0]">{{ detail[0].wprice }}元</span>
      </div>
      <div class="detailicon">
        <span
          ><img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7p85mz93jronxiswwqea1pido27ban679f724c00-d70c-4742-b696-02b8465dcf97"
            alt=""
          /><i v-if="detail[0]">{{ detail[0].wcity }}</i></span
        >
        <span
          ><img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psw7fixmrwkwp1hu26dwjq2a34nbutgh2o215bbeac3-4f3f-4ba7-8c02-e2eef71a021a"
            alt=""
          /><i v-if="detail[0]">经验不限</i></span
        >
        <span
          ><img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps45x4xzobvtcn3osn1rz768o9p4bpso5qp80d0f999-1705-40ad-97c1-45f87afd2b4c"
            alt=""
          /><i v-if="detail[0]">{{ detail[0].wedu }}</i></span
        >
      </div>
      <div class="jipin">
        <div class="jp">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pswj5ghqk3axm1lpst9suigbl6agjeuq1w56ebb822-466c-4192-9625-6a1716a5e9dc"
            alt=""
          />
          <p>急聘</p>
        </div>
        <div class="jpcon">
          该职位为急聘职位,你可点击下方的一键投递直接发送简历
        </div>
      </div>
      <div class="pmessage">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps1dp7zopjd5yenmha7yar9ayvyedwi51rj4a9bc9de-fb54-4593-9f9a-77332b83d583"
          alt=""
        />
        <div class="pm">
          <div class="pstate">
            <span class="xm" v-if="detail[0]">{{ detail[0].hr }}</span>
            <div class="online">
              <div class="dian"></div>
              <span class="zx">在线</span>
            </div>
          </div>
          <div class="zhiwei">
            <span v-if="detail[0]">{{ detail[0].compname }}</span
            >·<span>HR</span>
          </div>
        </div>
      </div>
    </div>
    <div class="daaixin">
      <van-icon name="like-o" @click="Asc" v-show="value" class="scaixin" />
      <div class="scaixintu" @click="Asc" v-show="!value">
        <img src="../../img/爱心_看图王.png" alt="" />
      </div>
    </div>
    <div class="detailmiddle">
      <p>职位详情</p>
      <div class="twospan">
        <span>认真负责</span>
        <span>经验不限</span>
      </div>
      <div class="detailcontent">
        <div class="detailcontents one">设计岗位职责：</div>
        <div class="detailcontents">
          1·负责店铺的整体形象设计、风格及商品展示设计全面提升产品页面的整体视觉效果，对页面视觉效果负责；
        </div>
        <div class="detailcontents">
          2·对产品摄影图进行精修，提升产品品质感与品牌感，提升产品表现能力。进行详情页的设计和优化，并对页面陈列、海报进行合理布局，提高转化
        </div>
        <div class="detailcontents">
          3·分析制定设计创意需求，做出概念设计方案，依照运营需求按时间节点输出高品质设计;
        </div>
        <div class="detailcontents">
          4·具有独立的创意思想和设计执行能力，能够把设计概念转化为有视觉冲击力的互动作品，有较好的视觉功底和创意能力，对自己的设计和作品精益求精，力求完美；
        </div>
        <div class="detailcontents">
          5·站在用户角度去思考，优化设计；能够挖掘消费者的浏览习惯和点击需求。
        </div>
        <div class="detailcontents">
          6·设计软件功底扎实<br />
          (AI.PS.CDR.c4d.PR.AE.)，做图速度快，质量高视频制作等熟练(投递简历需附作品)
        </div>
        <div class="detailcontents">
          7·有摄影功底的，服饰类目方面经验者优先录用！<br />
          工作时间：早九晚六，单休，享受带薪年假！<br />
          地点是：上海市奉贤区南桥镇环城东路58号供销大厦5楼502
        </div>
      </div>
    </div>
    <div class="detailfoot">
      <button>一键报名</button>
      <button>立即沟通</button>
    </div>
  </div>
</template>

<script>
import Goback from "@/components/index/Goback";
import axios from "axios";
export default {
  data() {
    return {
      title: "",
      value: true,
      detail: [],
    };
  },
  created() {
    axios.get("http://1.117.229.207:8082/api/job/all.do").then((res) => {
      this.detail = res.data.data.filter(
        (item) => this.$route.query.id == item.id
      );
      console.log(this.detail);
    });
  },
  mounted() {
    this.title = this.$route.meta.title;
  },
  components: {
    Goback,
    axios,
  },
  methods: {
    Asc() {
      this.value = !this.value;
    },
  },
};
</script>

<style>
.daaixin {
  width: 60px;
  height: 60px;
}
.scaixin {
  position: relative;
  top: -7rem;
  right: -38rem;
  font-size: 60px;
}
.scaixintu {
  position: relative;
  width: 60px;
  height: 60px;
  top: -7rem;
  right: -38rem;
}
.scaixintu img {
  width: 60px;
  height: 60px;
}
.detailhead {
  border-bottom: #e7e7e7 1px solid;
}
.desgin i {
  width: 295px;
  height: 46px;
  font-size: 48px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #323232;
  line-height: 91px;
  font-style: normal;
  margin-left: 30px;
}
.desgin span {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #08a9a2;
  line-height: 91px;
  float: right;
  margin-top: 10px;
  margin-right: 40px;
}
.detailicon img {
  width: 30px;
  height: 36px;
  margin-left: 30px;
}
.detailicon i {
  width: 52px;
  height: 24px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #323232;
  line-height: 91px;
  font-style: normal;
  margin-left: 14px;
  margin-bottom: 10px;
}
.jipin {
  background: #fe4251;
  height: 128px;
  width: 656px;
  margin-left: 46px;
  margin-right: 48px;
  border-radius: 10px;
  margin-top: 20px;
}
.jipin .jp {
  float: left;
  margin-left: 50px;
}
.jipin .jp img {
  width: 30px;
  height: 30px;
  margin-top: 24px;
}
.jipin .jp p {
  width: 52px;
  height: 25px;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 91px;
  margin-top: -20px;
  margin-left: -10px;
}
.jpcon {
  width: 418px;
  height: 62px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 41px;
  float: right;
  margin-top: 24px;
  margin-right: 80px;
}
.pmessage {
  height: 120px;
  margin-left: 50px;
  margin-top: 100px;
  margin-bottom: 20px;
}
.pmessage img {
  float: left;
  width: 120px;
  height: 120px;
}
.pm {
  float: left;
  margin-left: 20px;
}
.pstate {
  display: flex;
}
.online {
  margin-top: 14px;
  margin-left: 18px;
}
.zhiwei {
  margin-top: 16px;
  font-size: 30px;
}
.pm .xm {
  font-size: 30px;
  margin-top: 10px;
  font-weight: 600;
}
.detailmiddle p {
  width: 132px;
  height: 31px;
  font-size: 32px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4c4c4c;
  line-height: 41px;
  margin-left: 50px;
  margin-top: 40px;
}
.detailmiddle .twospan {
  margin-left: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.twospan span:nth-of-type(1) {
  float: left;
  margin-left: 20px;
  width: 160px;
  height: 64px;
  background: #f6f6f6;
  border-radius: 10px;
  line-height: 64px;
  text-align: center;
}
.twospan span:nth-of-type(2) {
  float: right;
  margin-left: 20px;
  width: 160px;
  height: 64px;
  line-height: 64px;
  background: #f6f6f6;
  border-radius: 10px;
  text-align: center;
  margin-right: 340px;
}
.detailcontent .one {
  margin-top: 150px;
}
.detailcontents {
  width: 651px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4c4c4c;
  margin-left: 50px;
}
.detailfoot {
  margin-top: 80px;
  margin-left: 50px;
  margin-bottom: 70px;
}
.detailfoot button:nth-of-type(1) {
  width: 212px;
  height: 94px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 94px;
  background: #25c6bc;
  border-radius: 10px;
  border: none;
}
.detailfoot button:nth-of-type(2) {
  width: 410px;
  height: 94px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  background: #fbc805;
  border-radius: 10px;
  margin-left: 20px;
  border: none;
}
.online {
  width: 92px;
  height: 35px;
  background: #e8f7e2;
  border-radius: 10px;
}
.online .dian {
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #5bcc40;
  margin-top: 10px;
  margin-left: 10px;
}
.online .zx {
  float: right;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3bb918;
  margin-top: -22px;
  margin-right: 14px;
}
</style>
